<template>
  <div ref="wrapper">
    <slot></slot>
  </div>
</template>

<script scoped>
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
BScroll.use(Pullup)

export default {
   name: "Scroll",
   data() {
       return {
         bs: {}
       }
   },
   props: {
     probeType: {
       type: Number,
       default: 0
     },
     pullUpLoad: {
       tepe: Boolean,
       default: false
     }
   },
   mounted() {
      this.init()
    },
    beforeDestroy() {
      this.bs.destroy()
    },
     methods: {
       //初始化BetterScroll对象
      init() {
        if (!this.$refs.wrapper) return
        this.bs = new BScroll(this.$refs.wrapper, {
          probeType: this.probeType,
          click: true,
          pullUpLoad: this.pullUpLoad
        })
        //实时监听滚动事件
        this.bs.on('scroll', (pos) => {
          this.$emit('scroll', pos)
        })
        //监听上拉到底部
        if(this.pullUpLoad) {
          this.bs.on('pullingUp', pos => {
          this.$emit('pullingup')
          })
        }

      },
      //图片加载完毕，bs刷新,重新设置scrollHeight属性 即：滚动区域高度
      refresh() {
        this.bs && this.bs.refresh()
      },
      scrollTo(x, y, time) {
        this.bs && this.bs.scrollTo(x, y, time)
      },
      finishPullUp() {
        this.bs && this.bs.finishPullUp()
      },
      closePullUp() {
        this.bs && this.bs.closePullUp()
      },
      openPullUp() {
        this.bs && this.bs.openPullUp()
      },
      getScrollY() {
        return this.bs ? this.bs.y : 0
      }
    }
}
</script>

<style lang='less' scoped>

</style>
